<template>
	<view class="content">
		<!-- 	 <cc-pullScroolView class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown"> -->
		<view class="header" :style="{'padding-top':tops+'px'}">
			<view style="height: 100rpx;">
				<view class="back" @click="goBack">
					<image src="../../static/9.png"></image>
				</view>
				
				<view class="name">客户深度印象管理</view>
				<view class="history" @click="showPop()">新增</view>
			</view>
			<!-- 	<view class="tabList">
				<view class="li" :class="tabActive == index ? 'tabActive':''" v-for="(item,index) in tabList"
					@click="tabChange(index)">{{ item.text }}</view>
			</view> -->
		</view>

		<view class="lists" :style="{'margin-top':systemInfo.uniPlatform == 'mp-weixin' ? tops + 60+'px' : ''}">
			<view class="li" v-for="(item,index) in lists">
				<view>属性：{{ item.text }}</view>
				<view class="set">
					<view @click="impressionAdministration_child(item)">查看</view>
					<view @click="edict(item)">修改</view>
					<view @click="deleteIt(item,index)">删除</view>
				</view>
			</view>
		</view>
		<!-- </cc-pullScroolView> -->
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" @maskClick="closeScreen">
			<view class="screen-box" style="padding-top: 50rpx;">
				<!-- <view class="title">跟进类别 <image class="close" @click="closeScreen" src="../../static/18.png"></image>
				</view> -->
				<input type="text" v-model="text" placeholder="请输入名字" />
				<!-- <view class="swichBox">
					<view class="li" v-for="(item,index) in swich" :class="swichActive == index ? 'tabActive':''"
						@click="swichChange(index)">{{item.name }}</view>
				</view> -->
				<view class="btn" @click="saveText">
					保存
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		list_kehuyinxiangcaidan,
		add_kehuyinxiangcaidan,
		put_kehuyinxiangcaidan,
		delete_kehuyinxiangcaidan
	} from "@/utils/api.js";
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	export default {
		data() {
			return {
				title: 'Hello',
				tabList: [{
						text: '客户类别'
					},
					{
						text: '跟进类别'
					},
				],
				tabActive: 0,
				swich: [{
						name: '正常',
						value: 0
					},
					{
						name: '禁用',
						value: 1
					}
				],
				swichActive: 0,
				hobby: [{
					text: '球足球',
					value: 0
				}, {
					text: '篮篮球球',
					value: 1
				}, {
					text: '游泳游泳',
					value: 2
				}, {
					text: '篮篮球球',
					value: 1
				}],
				tops: 0,
				height: 0,
				screenHeight: '',
				systemInfo: '',
				// 数据列表
				lists: [],
				// 分页参数
				page: 1,
				pageSize: 10,
				count: '',
				text: '',
				edictForm: ''
			}
		},
		onLoad(options) {
			console.log(options)

			this.height = 100;
			uni.getSystemInfo({

				success: (e) => {
					this.systemInfo = e
					this.tops = e.statusBarHeight;
					console.log('========', e)
					this.screenHeight = e.screenHeight - 40
					let custom = uni.getMenuButtonBoundingClientRect();

					/*#ifdef MP-WEIXIN*/
					this.height = 140 + custom.height + (custom.top - e.statusBarHeight) * 2;
					/*#endif*/
				}

			})
			this.getList(1)

		},
		onPullDownRefresh() {
			// 处理下拉刷新的逻辑
			console.log('下拉刷新');
			this.page = 1
			this.getList(1)
		},

		onReachBottom() {
			// 处理下拉加载更多的逻辑
			console.log('下拉加载更多');
			this.page++;
			// 模拟加载更多数据
			this.getList();
		},

		methods: {
			goBack() {
				uni.navigateBack()
			},
			showPop() {
				this.$refs.popup.open('center')
				this.screenPop = true
				this.edictForm = ''
			},
			closeScreen() {
				this.$refs.popup.close()
				console.log('关闭')
				this.screenPop = false
			},
			confirmScreen() {
				this.$refs.popup.close()
			},
			addSeniorData() {
				uni.navigateTo({
					url: "/pages/addSeniorData/index"
				})
			},
			tabChange(index) {
				this.tabActive = index
			},
			swichChange(index) {
				this.swichActive = index
			},
			history() {
				uni.navigateTo({
					url: '/pages/impressionHistory/index'
				})
			},
			
			impressionAdministration_child(item){
				uni.navigateTo({
					url: '/pages/impressionAdministration_child/index?kehuyinxiang_xuanxiang_id=' + item.kehuyinxiang_caidan_id
				})
			},

			edict(row) {
				let that = this
				that.edictForm = row
				that.text = row.text
				that.$refs.popup.open('center')
				that.screenPop = true
			},

			deleteIt(row, index) {
				let that = this
				that.edictForm = row
				uni.showModal({
					title: '提示：',
					content: '请确认是否要删除？',
					success: async function(res) {
						if (res.confirm) {
							console.log('确定');
							let data = that.edictForm
							let res = await delete_kehuyinxiangcaidan(that.edictForm.kehuyinxiang_caidan_id)
							console.log('删除状态', res)
							if (res.code == 0) {
								uni.showToast({
								    title: '删除成功',
								    //icon: 'none',
								    duration: 2000
								});
								that.lists.splice(index, 1)
								that.getList()
							}

						} else if (res.cancel) {
							// console.log('取消');
							//TODO
							return
						}
					}
				});
			},

			// 列表
			async getList(type) {
				let that = this
				let data = {
					page: that.page,
					size: 20,
					user_id: uni.getStorageSync('userInfo').user_id
				}
				let res = await list_kehuyinxiangcaidan(data);

				if (res.code == 0) {
					that.count = res.count
					console.log('印象列表===', res.results)
					if (type == 1) {
						that.lists = res.results
					} else {
						that.lists.concat(res.results)
					}

					// 停止下拉刷新动画
					uni.stopPullDownRefresh();
				}

			},

			// 添加客户印象
			async saveText() {
				let that = this
				let data = {
					text: that.text,
					user: uni.getStorageSync('userInfo').user_id
				}
				if (that.edictForm) {
					that.edictForm.text = that.text
					data = that.edictForm
					let res = await put_kehuyinxiangcaidan(data, that.edictForm.kehuyinxiang_caidan_id)
					console.log('修改状态', res)
					if (res.code == 0) {
						uni.showToast({
						    title: '修改成功',
						    //icon: 'none',
						    duration: 2000
						});
						that.$refs.popup.close()
						that.screenPop = false
						that.getList()
					}
				} else {
					let res = await add_kehuyinxiangcaidan(data)
					console.log('添加状态', res)
					if (res.code == 0) {
						uni.showToast({
						    title: '添加成功',
						    //icon: 'none',
						    duration: 2000
						});
						that.$refs.popup.close()
						that.screenPop = false
						that.page = 1
						that.lists = []
						that.getList(1)
					}
				}

			},

		}
	}
</script>

<style>
	page {
		height: 100%
	}

	.screen-box {
		width: 520rpx;
		height: 260rpx;
		background-color: white;
		border-radius: 10rpx;
		font-size: 26rpx;
	}

	.screen-box .title {
		width: 90%;
		margin: auto;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #008BDE;
		text-align: center;
	}

	.screen-box .title .close {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 20rpx;
		top: 15rpx;
	}

	.screen-box input {
		width: 75%;
		display: block;
		border: 1rpx solid #ccc;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 26rpx;
		margin: auto;
		padding-left: 20rpx;
		text-align: center;
		border-radius: 10rpx;
	}

	.screen-box .btn {
		width: 80%;
		height: 66rpx;
		line-height: 66rpx;
		border-radius: 5rpx;
		color: white;
		text-align: center;
		margin: auto;
		background-color: #008BDE;
		margin-top: 50rpx;
		font-size: 26rpx;

	}

	.swichBox {
		width: 78.3%;
		height: 60rpx;
		margin: auto;
		line-height: 60rpx;
		border: 1rpx solid #008BDE;
		display: flex;
		margin-top: 20rpx;
	}

	.swichBox .li {
		width: 50%;
		text-align: center;
		font-size: 26rpx;
	}

	.swichActive {
		background-color: #008BDE;
		color: white !important;
	}

	.header {
		width: 100%;
		height: 100rpx;
		line-height: 90rpx;
		position: fixed;
		top: 0;
		z-index: 10;
		text-align: center;
		background-color: white;
	}
	.header .back {
		height: 100%;
		width: 40rpx;
		margin-left: 30rpx;
		float: left;
		display: flex;
		align-items: center;
	}
	.header .back image{
		width: 20rpx;
		height: 40rpx;
		
	}

	.header .name {
		height: 100%;
		line-height: 90rpx;
		margin-top: 7rpx;
		margin-left: 20rpx;
		background-color: white;
	}

	.header .history {
		width: 150rpx;
		height: 55rpx;
		line-height: 55rpx;
		background: #008BDE;
		border-radius: 5rpx;
		position: absolute;
		font-size: 26rpx;
		right: 40rpx;
		top: 26rpx;
		color: #fff;
	}

	/*#ifdef MP-WEIXIN*/
	.header .name {
		width: 35%;
		height: 70rpx;
		line-height: 70rpx;
		margin-right: 50rpx;
		float: left;
		margin-top: 13rpx;
	}

	.header .history {
		float: left;
		position: initial;
		margin-top: 24rpx;
	}

	/*#endif*/
	.tabList {
		width: 90%;
		height: 60rpx;
		line-height: 60rpx;
		border: 1rpx solid #008BDE;
		margin: auto;
		display: flex;
	}

	.tabList .li {
		width: 50%;
		text-align: center;
		color: #008BDE;
		font-size: 26rpx;
	}

	.tabActive {
		background-color: #008BDE;
		color: white !important;
	}

	.lists {
		width: 90%;
		margin: auto;
		margin-top: 130rpx;
	}

	.lists .li {
		line-height: 60rpx;
		margin-top: 10rpx;
		border-bottom: 1rpx solid #f5f5f5;
		padding-bottom: 10rpx;
		font-size: 28rpx;
		position: relative;
	}

	.lists .li .set {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		display: flex;
	}

	.lists .li .set view {
		width: 80rpx;
		margin-left: 10rpx;
		font-size: 26rpx;
		color: #008BDE;
		text-align: center;
	}

	.lists .li .set view:nth-child(3) {
		color: red;
	}

	.lists .li .time {
		color: #999;
	}

	.imgList {
		margin-top: 20rpx;
		display: flex;
	}

	.imgList image {
		width: 100rpx;
		height: 100rpx;
		margin-left: 10rpx;
	}

	/deep/ .icon-add {
		width: 50rpx;
	}

	.save-btn {
		width: 80%;
		height: 66rpx;
		line-height: 66rpx;
		border-radius: 80rpx;
		color: white;
		text-align: center;
		margin: auto;
		background-color: #008BDE;
		margin-top: 50rpx;
		font-size: 26rpx;
		position: fixed;
		bottom: 15%;
		left: 0;
		right: 0;
		margin: auto;

	}

	/deep/ .checklist-box {
		width: 102rpx !important;
		display: inherit !important;
	}

	/deep/ .checklist-box.is--tag {
		width: 142rpx !important;
		height: 55rpx;
		padding: 0 !important;
	}

	/deep/ .checklist-content {
		width: 90%;
		flex: none !important;
		display: inherit !important;
		text-align: center;
		margin: auto;
	}

	/deep/ .checklist-text {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		flex-wrap: nowrap;
		text-align: center;
	}

	/deep/ .checklist-text span {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		flex-wrap: nowrap;
		text-align: center;
	}

	.tabCon {
		width: 500rpx;
		height: 100%;
		margin-left: 20rpx;
	}
</style>